<template>
    <div class='header-container'>
        <strong>VueAdmin管理系统</strong>
        <div class='header'>
            <router-link class='link' to='/login'>
                <el-avatar size='medium' :src='userInfo.avatar'></el-avatar>
            </router-link>
            <el-dropdown trigger='click'>
                        <span class='el-dropdown-link'>
                            {{userInfo.username}}<i class='el-icon-arrow-down el-icon--right'></i>
                        </span>
                <el-dropdown-menu slot='dropdown'>
                    <el-dropdown-item @click.native="userCenter">个人中心</el-dropdown-item>
                    <el-dropdown-item @click.native='logout'>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Header',
      data () {
        return{
            userInfo: {
                id: '',
                username: '',
                avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            }
        }
      },
      created() {
        this.getUserInfo();
      },
      methods: {
          // 获取用户信息
          getUserInfo() {
              this.$axios.get('/sys/userInfo').then(res => {
                  this.userInfo = res.data.data
              });
          },
          // 用户中心
          userCenter() {
              this.$store.commit('ADD_TABLETABS', {title:'用户中心', name:'UserCenter'});
              this.$router.push({name:'UserCenter'});
          },
          // 退出登录
          logout() {
              this.$axios.post('/logout').then(res => {
                  localStorage.clear();
                  sessionStorage.clear();
                  this.$store.commit('RESET_STATE');
                  this.$store.commit('RESET_TABSTATE');
                  this.$router.push('/login');
                  this.$message.success('退出登录成功~');
              })
          }
      }
  }
</script>

<style lang='scss' scoped>
    .header-container{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header{
            display: flex;
            align-items: center;

            .link{
                display: flex;
                margin-right: 10px;
            }
            .el-dropdown {
                height: 100%;
                .el-dropdown-link{
                    display: block;
                    height: 100%;
                    user-select: none;
                    cursor: pointer;
                }
            }
        }
    }

</style>
